<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="8"
                v-for="(item,index) in damageInfo"
                :key="index">
          <el-timeline>
            <el-timeline-item :timestamp="item.time"
                              :color="item.color1"
                              placement="top">
              <el-card>
                <p>上报人：<span>{{item.name}}</span></p>
                <p>上报时间：<span>{{item.time}}</span></p>
                <p>损坏物品：<span>{{item.article}}</span></p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item :timestamp="item.finishTime"
                              :color="item.color2"
                              placement="top">
              <el-card>
                <p v-if="!item.isSolve"
                   style="color:#ebb563">还没维修哦~请等待</p>
                <p v-else
                   style="color:#85ce61">已维修</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <el-divider></el-divider>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { formDate } from '../../commonjs/formatDate.js'
export default {
  name: 'damageInfo',
  props: [''],
  data () {
    return {
      damageInfo: []
    }
  },
  created () {
    this.getDormDamageInfo()
  },

  methods: {
    async getDormDamageInfo () {
      const { data: res } = await this.$axios.get('/damage/currDormDamageInfo', {
        params: {
          tower: window.localStorage.getItem('tower'),
          dorm: window.localStorage.getItem('dorm')
        }
      })
      // console.log(res)
      if (res.meta.code !== 200) {
        this.$message('本宿舍暂时没有上报维修哦~')
      } else {
        res.result.filter(valid => {
          const data = {
            name: valid.name,
            time: formDate(valid.time),
            article: valid.article,
            desc: valid.desc,
            isSolve: valid.isSolve,
            finishTime: formDate(valid.finishTime) === '1970-01-01 08:00:00' ? '还没维修哦~请等待' : '已维修：' + formDate(valid.finishTime),
            color1: '#66b1ff',
            color2: valid.isSolve ? '#85ce61' : '#ebb563'
          }
          this.damageInfo.push(data)
        })
        // console.log(this.damageInfo)
      }
    }
  },

  watch: {}

}

</script>
<style lang='' scoped>
</style>
